<template>
  <div class="main">
    <div class="header">
      <el-form ref="form">
        <el-form-item label="分类：">
          <el-select style="padding-right: 30px" v-model="categoryId">
            <el-option v-for="category in categoryList" :key="category.id"
                       :label="category.name" :value="category.id"></el-option>
          </el-select>
          <el-button type="primary" @click="getDish">查看</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="餐品号" prop="id"></el-table-column>
        <el-table-column label="名称" prop="name">
          <template slot-scope="scope">
            <el-button @click="getDishEvaluation(scope.row.id)"
                       type="text">{{ scope.row.name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="餐馆名称" prop="restaurantName">
          <template slot-scope="scope">
            <el-button @click="getRestaurantEvaluation(scope.row.restaurantId)"
                       type="text">{{ scope.row.restaurantName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button size="mini" type="success"
                       @click="tryToBuy(scope.row.id, scope.row.price)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="购买餐品" width="30%"
               :visible.sync="buyDialog">
      <el-form>
        <el-form-item label="餐品id">
          <el-input v-model="buyId" disabled></el-input>
        </el-form-item>
        <el-form-item label="餐品单价">
          <el-input v-model="buyPrice" disabled></el-input>
        </el-form-item>
        <el-form-item label="购买数量">
          <el-input v-model="buyNum" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="buy">购 买</el-button>
      </span>
    </el-dialog>

    <el-dialog title="餐品评价" width="60%" :visible.sync="dishEvaluationShow">
      <el-table :data="dishEvaluationList" border>
        <el-table-column label="用户" prop="nickname" width="120px"></el-table-column>
        <el-table-column label="打分" width="180px">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score" disabled></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="评价" prop="description"></el-table-column>
        <el-table-column label="评价时间" prop="createdTime" width="180px"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="餐馆评价" width="60%" :visible.sync="restaurantEvaluationShow">
      <el-table :data="restaurantEvaluationList" border>
        <el-table-column label="用户" prop="nickname" width="120px"></el-table-column>
        <el-table-column label="打分" width="180px">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score" disabled></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="评价" prop="description"></el-table-column>
        <el-table-column label="评价时间" prop="createdTime" width="180px"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getDishList, getInformation, orderDish} from "@/http/api/user";
import cookie from "js-cookie";
import {allCategory} from "@/http/api/category";
import {FindDishEvaluation, FindRestaurantEvaluation} from "@/http/api/evaluation";

export default {
  name: "Dish",
  data() {
    return {

      // 个人信息
      userId: '',
      balance: '', // 余额

      // 分类
      categoryId: '1',
      categoryList: [],

      // 菜品
      tableData: [],

      // 购买
      buyId: '',
      buyPrice: 0,
      buyNum: 1,
      buyDialog: false,

      // 餐品评价
      dishEvaluationShow: false,
      dishEvaluationList: [],

      // 餐馆评价
      restaurantEvaluationShow: false,
      restaurantEvaluationList: [],
    }
  },
  methods: {

    // 获取个人信息
    async getUser() {
      this.userId = cookie.get('userId')
      let result = await getInformation({
        userId: this.userId
      })
      if (result.code === 0) {
        let balance = result.data.balance
        if (balance instanceof String) {
          balance = parseInt(balance)
        }
        this.balance = balance
      } else {
        this.$message.warning('获取用户信息失败')
      }
    },

    // 获取分类列表
    async getCategoryList() {
      let result = await allCategory()
      if (result.code === 0) {
        this.categoryList = result.data
      }else {
        this.$message.warning('获取分类信息失败')
      }
    },

    // 进入购买界面
    tryToBuy(dishId, price){
      this.buyId = dishId
      this.buyPrice = parseInt(price)
      this.buyDialog = true
    },

    // 获取菜品列表
    async getDish(){
      let result = await getDishList({
        categoryId: this.categoryId
      })
      if (result.code === 0) {
        this.tableData = result.data
      }else{
        this.$message.warning('获取失败')
      }
    },

    // 购买餐品
    async buy(){
      let result = await orderDish({
        userId: this.userId,
        dishId: this.buyId,
        quantity: this.buyNum,
        money: this.buyPrice * this.buyNum
      })
      if (result.code === 0) {
        this.$message.success('购买成功')
      }else {
        this.$message.warning(result.message)
      }
      this.buyDialog = false
    },

    // 查看餐品评价
    async getDishEvaluation(dishId) {
      let result = await FindDishEvaluation({
        dishId: dishId,
      })
      if (result.code === 0) {
        this.dishEvaluationShow = true
        this.dishEvaluationList = result.data
      }
    },

    // 查看餐馆评价
    async getRestaurantEvaluation(restaurantId){
      let result = await FindRestaurantEvaluation({
        restaurantId: restaurantId,
      })
      if (result.code === 0) {
        this.restaurantEvaluationShow = true
        this.restaurantEvaluationList = result.data
      }
    }

  },
  // 获取初始化信息
  async mounted() {
    await this.getUser()
    await this.getCategoryList()
  }
}
</script>

<style scoped>

</style>